<template>
  <view class="topbar-container" :style="{ height: sysInfo.topBarH + 'px' }">
    <view class="fill-bg" :style="{ height: sysInfo.topBarH + 'px', opacity, background }" v-show="opacity" />
    <view
      class="header"
      :style="{
        height: `${sysInfo.topBarH - sysInfo.statusBarH}px`,
        paddingTop: `${sysInfo.statusBarH}px`
      }"
    >
      <view class="left" :style="{ color: color }" @tap="changeCity">
        <nut-icon name="location2" :color="color" size="14"></nut-icon>
        <view class="city">{{ city }}</view>
        <nut-icon name="arrow-right" :color="color" size="13" class="arrow-right"></nut-icon>
      </view>
      <view class="title" :style="{ color: color }" v-if="title">
        {{ title }}
      </view>
      <view class="search" :style="{ width: searchW + 'px' }" v-else>
        <input type="text" :placeholder="placeholder" placeholder-class="placeholder-style" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { useDidShow, setStorage, navigateTo, getStorageSync } from '@tarojs/taro'
import { defineProps, ref, watch } from 'vue'
import { getSysInfo } from '@/common/system'
import { parseAddress } from '@/api/address'

const props = defineProps({
  background: {
    type: String,
    default: 'linear-gradient(to bottom right, #ffa7b5, #ff5177)'
  },
  colorVal: {
    type: Number,
    default: 255
  },
  title: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '搜索电影或影院'
  }
})

const color = ref('#FFF')
const opacity = ref(1)
watch(
  () => props.colorVal,
  val => {
    caculatorOpacity(val)
    caculatorColor(val)
  }
)
const caculatorOpacity = val => {
  val = val > 255 ? 255 : val
  opacity.value = Math.floor((val / 255) * 100) / 100
}
const caculatorColor = val => {
  let hexStr = val.toString(16)
  hexStr = hexStr.length > 1 ? hexStr : '0' + hexStr
  color.value = `#${hexStr + hexStr + hexStr}`
}

const sysInfo = ref({
  topBarH: 40,
  statusBarH: 44
})
const searchW = ref(180)

useDidShow(() => {
  sysInfo.value = getSysInfo()
  searchW.value = sysInfo.value.windowWidth - sysInfo.value.menuButtonW - 90 - 60
  getLocation()
})

const getLocation = async () => {
  const cityData = getStorageSync('city')
  if (cityData) {
    city.value = cityData.name
  } else {
    wx.getLocation({
      type: 'wgs84',
      success: async res => {
        // const { latitude, longitude } = res
        const adInfo = await parseAddress(res)
        city.value = adInfo.city
      },
      fail: err => {}
    })
  }
}

const keywords = ref('')
const city = ref('广州市')
const changeCity = () => {
  navigateTo({
    url: `/pages/city/index?city=${city.value}`
  })
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.topbar-container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background: #fff;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      position: absolute;
      left: 10px;
      display: flex;
      align-items: center;
      .city {
        max-width: 60px;
        overflow: hidden;
        font-size: 14px;
        padding-left: 3px;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
      .arrow-right {
        margin-bottom: -2px;
      }
    }
    .title {
      font-size: 18px;
      z-index: 2;
    }
    .search {
      overflow: hidden;
      background: $input-bg-color;
      border-radius: 25px;
      padding: 5px 10px;
      margin: 0 5px 0 -5px;
      input {
        height: 20px !important;
        font-size: 14px;
      }
      .placeholder-style {
        color: $input-placeholder-color;
      }
    }
  }
  .fill-bg {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 100%;
    transition: all 0.2s;
  }
}
</style>
